@import 'base.less';
@base-size: 40px;
#custom-box{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.6);
	z-index: 99;

	#add-link{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 640px;
		height: 270px;
		margin-top: -135px;
		margin-left: -320px;
		color: @color-0-54;
		background-color: #fff;

		h3{
			position: relative;
			height: @base-size;
			line-height: @base-size;
			padding: 0 20px;
		    text-align: left;
		    box-sizing: border-box;
		    border-bottom: 1px solid @border-color;


		    .mac-app &{
		    	border-bottom: 1px solid @mac-border-color;
		    }

		    .close{
	    	    position: absolute;
			    display: block;
			    top: 10px;
			    right: 10px;
			    width: 20px;
			    height: 20px;
			    background: url(../static/images/icon-add-link.png) no-repeat 0 0;
			    background-size: 100%;
			    cursor: pointer;
		    }
		}

		.all{
			padding: 20px;
			&>ul{
				height: 120px;
				padding-bottom: 20px;

				a{
					display: block;
				    width: 120px;
				    height: 30px;
				    line-height: 30px;
				    margin: 15px 0;
				    float: left;
				    text-align: center;
				    position: relative;

				    .delete{
			    	    display: inline-block;
					    vertical-align: middle;
					    width: 14px;
					    height: 14px;
					    background: url(../static/images/icon-add-link.png) no-repeat 0 -14px;
					    background-size: 100%;
					    margin-left: 5px;
					    cursor: pointer;
				    }
				}
			}
		}

		.add{
			overflow: hidden;
			p{
				float: left;
				width: 225px;
    			margin-right: 20px;
			}

			a{
				display: block;
				width: 100px;
				line-height: 30px;
				overflow: hidden;
				text-align: center;
				color: @color-0-54;
				&:hover{
					color: @color-green;
				}
			}

			input{
				color: #888;
			    border: 1px solid #eee;
			    line-height: 26px;

			    .mac-app &{
			    	border: 1px solid @mac-border-color;
			    }
			}
		}
	}
}